<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/class.css"/>
</head>

<body>
	<div class="container">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">垃圾分类</h1>
		</header>
		<section>
			<div class="mui-slider">
				<div class="mui-slider-group">
		    	    <!--第一个内容区容器-->
					<div class="mui-slider-item">
						<div>
							<h3>干垃圾</h3>
							<p>厨余垃圾，有机垃圾</p>
						</div>
			        </div>
			    </div>
			</div>
			<div class="scroll-list">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--这里放置真实显示的DOM内容-->
						<ul id="slideItem"></ul>
					</div>
				</div>
			</div>
			
		</section>
	</div>
	
</body>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
<script type="text/javascript">
	mui.init()
	mui.plusReady(function () {
		// 请求垃圾数据
		mui.ajax('http://apis.juhe.cn/rubbish/category',{
			data:{
				key:'dfe7a5dc90a9be32d35d15d5a06eb619'
			},
			success:function(data){
				var result = data.result;
				mui.each(result,function(index,item){
					document.querySelector('.mui-slider-group').innerHTML += `
					<div class="mui-slider-item">
						<div>
							<h3>${item.name}</h3>
							<p>${item.explain}</p>
						</div>
					</div>`
				});
				fAddList(result[0])
				mui('.mui-slider').slider().gotoItem(0)
				document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				 fAddList(result[event.detail.slideNumber])
				});
			}
		})
		// 滑动改变数据
		function fAddList(options){
			var sHtml = '';
			var aNewArr = options.common.split('、');
			
			mui.each(aNewArr,function(index,item){
				sHtml+=`<li data-title='${item}'>${item}</li>`
			})
			document.querySelector('#slideItem').innerHTML = sHtml
		}
		
	    // 设置状态栏样式
	     plus.navigator.setStatusBarBackground('#f7f7f7');
	     plus.navigator.setStatusBarStyle('dark');
		 // 初始化轮播组件
		 mui('.mui-scroll-wrapper').scroll({
		 	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		 });
		 
		 // 点击跳转
		 mui('#slideItem').on('tap','li',function(){
			mui.openWindow({
				url: 'detail.html',
				id: 'deatail',
				extras:{
					title:encodeURI(this.getAttribute('data-title'))
				},
				show:{
					autoShow: true,
					title:'加载中'
				}
			})
		 })
	})
</script>
</html>
